<template>
  <div class="login-container">
    <el-form class="login-form" ref="login-form" :model="user" :rules="rules">
      <el-form-item>
        <h1>快递配送后台管理系统</h1>
      </el-form-item>
      <div class="radio">
        <el-radio-group v-model="radio1" class="ml-4" @change="changeRadio()">
          <el-radio label="1" size="large">后台</el-radio>
          <el-radio label="2" size="large">网点</el-radio>
        </el-radio-group>
      </div>
      <el-form-item prop="userName">
        <el-input v-model="user.userName" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="user.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="user.isAgree">已阅读并同意用户协议与隐私条款</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button class="login-btn" type="primary" @click="onLogin" :loading="loginLoading">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default{
  name: 'LoginIndex',
  data () {
    return {
      radio1: '1',
      user: {
        userName: '',
        password: '',
        isAgree: false
      },
      loginLoading: false,
      // 表单验证规则
      rules: {
        userName: { required: true, message: '用户名不能为空', trigger: 'blur' },
        password: { required: true, message: '密码不能为空', trigger: 'blur' },
        isAgree:
        {
          validator: (rule, value, callback) => {
            if (value) {
              callback()
            } else {
              callback(new Error('请同意用户协议'))
            }
          },
          trigger: 'change'
        }
      }
    }
  },
  methods: {
    onLogin () {
      this.loginLoading = true
      if(this.radio1==1){
        this.$router.push({
          name: 'AdminHome'
        })
      }
      
    },
    changeRadio(){
      console.log(this.radio1)
    }
  }
}

</script>


<style>
.login-container{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* background-color: black; */
  min-width: 400px;
}
.login-form{
  background-color: white;
  padding: 50px;
}
.login-btn{
  width: 100%;
}
.radio{
  margin-bottom: 50px;
}
</style>